<script setup>
// 天猫热榜
import { defineEmits, getCurrentInstance } from 'vue'
import { message } from 'ant-design-vue'
import axios from 'axios'
import dayjs from 'dayjs'
import { ref } from 'vue'
import TmHotPane from '~/contentScripts/views/tao/list/components/TmHotPane.vue'
import TmHotSearchPane from '~/contentScripts/views/tao/list/components/TmHotSearchPane.vue'
import { isLogin } from '~/logic'

const emit = defineEmits(['login'])
const tabs = ref([])
const tabs_1 = ref([])
const tab1 = ref('')
const tabs_2 = ref([])
const tab2 = ref('')
const tabs_3 = ref([])
const tab3 = ref('')
const visible = ref(false)
const date = ref(dayjs())
const loaded = ref(false)
const instance = getCurrentInstance()
const loadData = () => {
  if (loaded.value)
    return

  loaded.value = true
  axios.get('/Hot/TmCate', {
    params: {
      date: date.value.format('YYYY-MM-DD'),
    },
  }).then((res) => {
    if (res.data.data.length === 0) {
      loaded.value = false
      message.error('无该日期热榜数据~')
      // date.value = dayjs()
      // return
    }
    tabs.value = res.data.data
    tabs_1.value = res.data.data
    tab1.value = res.data.data[0].cate_index
    tabs_2.value = res.data.data[0].cate_children
    tab2.value = res.data.data[0].cate_children[0].cate_index
    tabs_3.value = res.data.data[0].cate_children[0].cate_children
    tab3.value = res.data.data[0].cate_children[0].cate_children[0].cate_index
  })
}
const __option = getCurrentInstance()?.appContext.provides.option;
const handle = () => {
  if (isLogin({
    emit,
  }, __option)) {
    visible.value = true
    loadData()
  }
}
// 监听日期变化
watch(() => date.value, () => {
  loaded.value = false
  loadData()
}, { deep: true })
const activeKey = ref('1')
</script>

<template>
  <div style="display: inline-block;" @click="handle">
    <slot>
      <a-button type="primary" size="small" style="margin-left: 10px;">
        天猫榜单
      </a-button>
    </slot>
  </div>
  <a-modal v-model:visible="visible" :width="1200" title="星察数据-天猫榜单" :footer="false">
    <a-tabs v-model:activeKey="activeKey" style="margin-top: -10px;">
      <template #rightExtra>
        <div v-if="activeKey == '1'">
          <div style="display: inline-block;font-size: 14px;">
            统计时间:
          </div>
          <a-date-picker
            v-model:value="date" size="small" format="YYYY-MM-DD" style="margin-left: 10px;"
            @change="loadData"
          />
        </div>
      </template>
      <a-tab-pane key="1" tab="🔥天猫榜单">
        <a-row type="flex" style="padding-bottom: 10px;">
          <a-col>
            商品分类：
          </a-col>
          <a-col flex="1">
            <a-row :gutter="[3, 5]">
              <a-col v-for="item in tabs_1" :key="item.visible">
                <div
                  class="cate-item" :class="{
                    'cate-item-active': tab1 === item.cate_index,
                  }"
                  @click="tab1 = item.cate_index; tabs_2 = item.cate_children; tab2 = item.cate_children[0].cate_index; tabs_3 = item.cate_children[0].cate_children; tab3 = item.cate_children[0].cate_children[0].cate_index;"
                >
                  {{ item.cate_name }}
                </div>
              </a-col>
            </a-row>
          </a-col>
        </a-row>
        <a-row type="flex" style="padding-bottom: 10px;">
          <a-col>
            子级分类：
          </a-col>
          <a-col flex="1">
            <a-row :gutter="[3, 5]">
              <a-col v-for="item in tabs_2" :key="item.visible">
                <div
                  class="cate-item" :class="{
                    'cate-item-active': tab2 === item.cate_index,
                  }" @click="tab2 = item.cate_index; tabs_3 = item.cate_children; tab3 = item.cate_children[0].cate_index;"
                >
                  {{ item.cate_name }}
                </div>
              </a-col>
            </a-row>
          </a-col>
        </a-row>
        <a-row type="flex" style="padding-bottom: 10px;">
          <a-col>
            细分分类：
          </a-col>
          <a-col flex="1">
            <a-row :gutter="[3, 5]">
              <a-col v-for="item in tabs_3" :key="item.visible">
                <div
                  class="cate-item" :class="{
                    'cate-item-active': tab3 === item.cate_index,
                  }" @click="tab3 = item.cate_index;"
                >
                  {{ item.cate_name }}
                </div>
              </a-col>
            </a-row>
          </a-col>
        </a-row>
        <TmHotPane :date="date" :rank-id="tab3" />
      </a-tab-pane>
      <a-tab-pane key="2" tab="🔍榜单查询">
        <TmHotSearchPane @login="emit('login')" />
      </a-tab-pane>
    </a-tabs>
  </a-modal>
</template>

<style lang="less" scoped>
.cate-item {
  padding: 0 5px;
  border-radius: 2px;
  cursor: pointer;
  font-size: 14px;
  line-height: 1.5;
  color: #444;

  &:hover, &.cate-item-active {
    background-color: #1890ff;
    color: #fff;
  }
}
</style>
